<template>
  <section>
    <!-- 应该从一份报告数据开始创建，显示已经完成的报告数据 -->
    <el-table :data="dataList">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="customerName" label="客户"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0">报告初始化</span>
          <span v-else-if="scope.row.state === 1">报告生成中</span>
          <span v-else-if="scope.row.state === 2">报告已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="完成">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="createReport(scope)" v-if="scope.row.state === 0">制作报告</el-button>
            <el-button type="text" @click="createReport(scope)" v-if="scope.row.state === 1">编辑报告</el-button>
            <el-button type="text" @click="createReport(scope)" v-if="scope.row.state === 2">查看报告</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="reportDataList !=null"
      background
      layout="prev, pager, next"
      :page-count="reportDataList.totalPages"
      :current-page="reportDataList.number+1"
      @current-change="pageChange">
    </el-pagination>
  </section>
</template>
<!-- 报告制作界面，由市场人员负责编辑管理 -->
<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: 'report-manage',
    data() {
      return {
        testList: [
          { id: 1, title: '测试数据', customerId: 1, customerName: '老叶', deleted: 0, state: 1, data: {} },
          { id: 2, title: '测试数据', customerId: 1, customerName: '老叶', deleted: 1, state: 0, data: {} },
        ],
        reportDataList:null
      }
    },
    computed:{
      dataList(){
        if(this.reportDataList)
          return this.reportDataList.content
        else
          return []
      }
    },
    created(){
      this.getReportDataList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      pageChange(e){
        console.log(e)
      },
      getReportDataList(){
        this.fetch({name:'getReportDataList'})
          .then(res=>{
            console.log(res)
            this.reportDataList = res
        }).catch(err=>{
          console.log(err)
          errHandler.handle(this,err)
        })
      },
      createReport(e) {
        let reportData = e.row
        console.log(reportData)
        this.$router.push({ path: '/examine/report-create/' + reportData.id })
      },
      finishReportBtn(row){
        this.$confirm('完成后不能再修改问卷,请确认是否完成报告?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.finishReport(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
        console.log(row)
      },
      finishReport(row){
        this.fetch({name:'finishReport',data:{id:row.id}})
          .then(res=>{
            console.log(res)
            this.$message({
              type: 'success',
              message: '报告已完成!'
            });
          }).catch(err=>{
          console.log(err)
          errHandler.handle(this,err)
        })
      }
    }
  }
</script>

<style lang="scss"></style>
